<template>
	<div class="index">
		<Header></Header>
		<!-- 内容 -->
		<div class="banner">
			<span>个人中心</span>
			<p>为你想的更多，为你做的更好</p>
		</div>
		<!-- 内容 -->
		<div class="conent">
			<div class="conent-top">
				<img src="../../assets/my/myss.png" alt="" />
				<p>修改密码</p>
			</div>
			<div class="conent-bottom">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="tab-card">
					<el-form-item label="请输入原密码" prop="psaaword"><el-input type="text" v-model="ruleForm.psaaword" placeholder="" show-password></el-input></el-form-item>
					<el-form-item label="请输入新密码" prop="psaawords">
						<el-input type="password" v-model="ruleForm.psaawords" show-password placeholder=""></el-input>
					</el-form-item>
					<el-form-item label="请确认新密码" prop="newpsaawords"><el-input v-model="ruleForm.newpsaawords" show-password placeholder=""></el-input></el-form-item>
				</el-form>
				<div class="conent-bo">
					<div class="header-main-user-out" @click="forget">确认</div>
					<div class="header-main-user-outs" @click="cancel">取消</div>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<Footer></Footer>
	</div>
</template>

<script>
import { forget_password } from '@/api/api.js';

export default {
	name: 'ForgetPassword',
	data() {
		var validatePhone = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入原密码'));
			} else {
				if (this.ruleForm.psaaword !== '') {
				}
				callback();
			}
		};
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入新密码'));
			} else {
				if (this.ruleForm.psaawords !== '') {
				}
				callback();
			}
		};
		var validatePasswords = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请确认新密码'));
			} else {
				callback(new Error('两次新密码不一致'));
			}
			callback();
		};
		return {
			psaaword: '',
			psaawords: '',
			newpsaawords: '',
			tokes: '',
			ruleForm: {
				psaaword: '',
				psaawords: '',
				newpsaawords: ''
			},
			rules: {
				psaaword: [{ validator: validatePhone, trigger: 'blur' }],
				psaawords: [{ validator: validatePass, trigger: 'blur' }],
				newpsaawords: [{ validator: validatePasswords, trigger: 'blur' }]
			}
		};
	},
	created() {},
	methods: {
		//   取消
		cancel() {
			this.$router.go(-1);
		},
		// 个人中心
		forgets() {
			let formData = new FormData();
			this.tokes = sessionStorage.getItem('token');
			formData.append('token', this.tokes);
			formData.append('old_password', this.ruleForm.psaaword);
			formData.append('password', this.ruleForm.newpsaawords);
			forget_password(formData).then(res => {
				this.ss = res;
				setTimeout(() => {
					this.$router.go(-1);
				}, 2000);
			});
		},
		forget() {
			// 账号登录
			this.$refs.ruleForm.validate(valid => {
				if (valid) {
					this.forgets();
				} else {
					return false;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/.el-form-item__content {
	display: flex;
}
.banner {
	width: 100%;
	height: 16rem;
	background: url(../../assets/my/mys.png);
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: #fff;
	span {
		font-size: 3rem;
	}
	p {
		font-size: 1.5rem;
	}
}
.conent {
	width: 100%;
	height: 30rem;
	margin-top: 1.5rem;
	.conent-top {
		width: 50%;
		height: auto;
		display: flex;
		align-items: center;
		margin: auto;
		img {
			width: 1rem;
			// height: 6%;
			margin-right: 0.4rem;
		}
		p {
			color: #126ac1;
		}
		.conent-top-right {
			width: 50%;
			height: auto;
			margin: auto;
			.span1 {
				color: #1669c1;
				display: flex;
				font-size: 1.1rem;
				.yuan {
					width: 0.4rem;
					height: 0.4rem;
					border-radius: 50%;
					border: 0.1rem solid #1669c1;
					margin-top: 0.5rem;
					margin-right: 0.5rem;
				}
			}
			.span2 {
				text-indent: 1rem;
				margin-top: 0.2rem;
			}
		}
	}
	// conent
	.conent-bottom {
		width: 50%;
		height: auto;
		// display: flex;
		margin: auto;
		flex-direction: column;
		.tab-card {
			width: 24.38rem;
			height: auto;
			display: flex;
			flex-direction: column;

			.el-form-item {
				// margin-bottom: 2rem;
			}

			/deep/ .el-form-item__label {
				margin: 0;
				text-align: left;
				// font-size: 1rem;
				// margin-bottom: 1rem;
			}

			/deep/ .el-input .el-input__inner,
			.el-input--suffix .el-input__inner {
				height: 2.19rem;
				border: solid 0.06rem#DADADA;
				background-color: transparent;
				color: #000;
			}

			/deep/ input::-webkit-input-placeholder {
				color: #dadada;
				font-size: 0.81rem;
			}

			.two-content {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.code-box {
					width: 15.25rem;
					background-color: transparent;
				}

				.get-code {
					width: 5rem;
					height: 2.19rem;
					border: solid 0.06rem #dadada;
					background-color: transparent;
					color: #dadada;
					font-size: 0.81rem;
					margin-left: 0.5rem;
				}
			}

			.two-tab {
				width: 100%;
				display: flex;
				justify-content: space-between;

				p {
					margin: 0;
					color: #5cd2fd;
					font-size: 0.75rem;
					cursor: pointer;
				}
			}
		}
		.conent-bo {
			width: 20rem;
			display: flex;
			margin-top: 2rem;
			margin-left: 5rem;
			justify-content: space-between;
			.header-main-user-out {
				width: 7rem;
				height: 2rem;
				background: #146ac1;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 0.3rem;
				cursor: pointer;
			}
			.header-main-user-outs {
				width: 7rem;
				height: 2rem;
				background: #b5b5b5;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 0.3rem;
				cursor: pointer;
			}
		}
	}
}
</style>
